<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import Cross from './components/cross.vue'
import SettingService from '@/services/setting.service'
import { appWindow } from '@tauri-apps/api/window'
import { listen } from '@tauri-apps/api/event'
import { invoke } from '@tauri-apps/api'

const settingService = new SettingService()
const crossConfig = reactive(settingService.crossConfig)

async function setPosition() {
  const pos = await appWindow.outerPosition()
  pos.x = crossConfig.offsetX + window.screen.availWidth / 2 - 32
  pos.y = crossConfig.offsetY + window.screen.availHeight / 2 - 32
  appWindow.setPosition(pos)
  console.log(pos, crossConfig, appWindow.label)
}

onMounted(async () => {
  // invoke('toggle_deltool')
  const size = await appWindow.outerSize()
  size.width = 64
  size.height = 64
  await appWindow.setSize(size)
  appWindow.setIgnoreCursorEvents(true)
  setPosition()
  listen('setting-change', evt => {
    Object.assign(crossConfig, (evt.payload as Any).cross || {})
    setPosition()
  })
})
</script>

<template>
  <div class="cross-win">
    <div class="cross-wrapper">
      <Cross v-bind="crossConfig" :opacity="1" />
    </div>
  </div>
</template>

<style scoped lang="less">
.cross-win {
  position: relative;
  width: 100vw;
  height: 100vh;
  .cross-wrapper {
    position: absolute;
    width: 64px;
    height: 64px;
    left: calc(50% - 32px);
    top: calc(50% - 32px);
    z-index: 1000;
  }
}
</style>
<style>
html, body {
  background: transparent !important;
  background-color: transparent !important;
}
</style>